<template>
  <div>
    <a-upload 
        :auto-upload="false" 
        list-type="picture-card" 
        :accept="$rules.check.getImageExts('string')"
        @change="upload" 
        :limit="1" 
        tip="LOGO尺寸建议180*46" 
        :show-preview-button="false" 
        :file-list="url ? [{
        uid: $uuid(),
        url
      }] : []">
      <!-- image-preview -->
    </a-upload>
  </div>
</template>

<script lang='ts' setup>
const props = defineProps({
  type: String,
  preview: Boolean,
  modelValue: String
})
const emit = defineEmits(['update:modelValue', 'change'])
const url = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit('update:modelValue', val)
    emit('change', val)
  }
})
const upload = (_: any,file: any) => {
  if(!file?.file) return url.value = ''
    const generateRandomFileName = (filePath: string | string[]) => {
    const extension = filePath.slice((Math.max(0, filePath.lastIndexOf(".")) || Infinity) + 1);
    const randomFileName = `${Date.now()}_${Math.random().toString(36).substr(2, 9)}.${extension}`;
    return randomFileName;
  };
  const randomFileName = generateRandomFileName(file.file.name);
  const formData = new FormData()
  formData.append('file', file.file)
  formData.append('filePath', randomFileName)
  formData.append('business', 'nav')
  formData.append('scene', 'img')

  apiUploadOss(formData).then((e) => {
    if (e.code != 200) return;
    url.value = e.data.fileUri
  })
};
</script>

<style scoped lang='less'>
:deep(.arco-upload-list-picture) {
  width: initial;
  height: inherit;
  padding: 10px;
  max-width: 100%;
  display: flex;
  align-items: center;
  min-height: 80px;
  background-color: rgba(0, 0, 0, 0.08);
  border-radius: 2px;

  img {
    height: initial;
  }
}
</style>